<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
        <link href="./resources/js/jquery-1.7.2.min.js" rel="stylesheet" type="text/javascript" />
        <title>J Chord Music</title>
    </h:head>

    <h:body>
        <!-- Início do TopTop -->
        <div id="toptop">   
            <h:outputLabel value=""></h:outputLabel>
        </div>
        <!-- Fim do Top -->

        <!-- Início do Top -->
        <div id="top">
            <div align="right">
                <div id="ico_carrinho"></div>
                <h:form id="formQtdCarrinho">
                    <div id="align_itemCarrinho">
                        <p:commandButton  value="#{backingCarrinho.count()}" action="#{backingCarrinho.prepararCarrinho()}"/>
                    </div>
                </h:form>
            </div>

            <div id="align_logo">
                <h:graphicImage value="/resources/img/sax2.png" width="150" height="100"/>
            </div>



            <div id="jchordmusic" style="top: -30px">
                <h:outputLabel value="CHORD MUSIC"></h:outputLabel>
            </div>

            <div id="busca">
                <h:form id="formBusca">
                    <p:inputText style="height:15px" required="true"/>
                    <h:outputLabel value="BUSCAR"/>
                    <h:commandButton image="/resources/img/icons/pesquisa.png" />
                </h:form> 
            </div>

            <h:form id="formMenuCentro">     
                <p:breadCrumb>
                    <p:menuitem value="" action="#{navegacaoBean.main()}"/>
                    <p:menuitem value="Violão" action="#{navegacaoBean.exibir_violao()}"/>
                    <p:menuitem value="Guitarra"  action="#{navegacaoBean.exibir_guitarra()}"/>
                    <p:menuitem value="Amplificadores e Pedais" action="#{navegacaoBean.exibir_amplificadores()}"/>
                    <p:menuitem value="Outros Instrumentos de Corda" action="#{navegacaoBean.exibir_outros_corda()}"/>
                    <p:menuitem value="Bateria e Percussão" action="#{navegacaoBean.exibir_bateria()}"/>
                    <p:menuitem value="Teclas"  action="#{navegacaoBean.exibir_teclas()}"/>
                    <p:menuitem value="Sopro" action="#{navegacaoBean.exibir_sopro()}"/>
                </p:breadCrumb>  
            </h:form>    
        </div>
        <!-- End do Top -->

        <!-- Begin do Left -->
        <div id="left">
            <h:form id="formMenuEsquerdo">
                <p:menu>
                    <p:submenu label="Violão">
                        <p:menuitem value="Violão Acústico Aço" action="#{backingProduto.prepararListaParametrizada()}">
                            <f:setPropertyActionListener target="#{backingProduto.descricao}" value="VIOLÃO_ACÚSTICO_AÇO"/>
                        </p:menuitem> 

                        <p:menuitem value="Violão Acústico Nylon"  action="#{backingProduto.prepararListaParametrizada()}">
                            <f:setPropertyActionListener target="#{backingProduto.descricao}" value="VIOLÃO_ACÚSTICO_NYLON"/>
                        </p:menuitem>

                        <p:menuitem value="Violão Elétrico Aço"  action="#{backingProduto.prepararListaParametrizada()}">
                            <f:setPropertyActionListener target="#{backingProduto.descricao}" value="VIOLÃO_ELETRICO_AÇO"/>
                        </p:menuitem> 

                        <p:menuitem value="Violão Elétrico Nylon"  action="#{backingProduto.prepararListaParametrizada()}">
                            <f:setPropertyActionListener target="#{backingProduto.descricao}" value="VIOLÃO_ELÉTRICO_NYLON"/>
                        </p:menuitem> 
                    </p:submenu>

                    <p:submenu label="Guitarra">
                        <p:menuitem value="Guitarra Stratocaster" action="#{backingProduto.prepararListaParametrizada()}">
                            <f:setPropertyActionListener target="#{backingProduto.descricao}" value="GUITARRA_STRATOCASTER"/>
                        </p:menuitem> 


                        <p:menuitem value="Guitarra Les Paul" action="#{backingProduto.prepararListaParametrizada()}">
                            <f:setPropertyActionListener target="#{backingProduto.descricao}" value="GUITARRA_LES-PAUL"/>
                        </p:menuitem> 

                        <p:menuitem value="Guitarra Sg" action="#{backingProduto.prepararListaParametrizada()}">
                            <f:setPropertyActionListener target="#{backingProduto.descricao}" value="GUITARRA_SG"/>
                        </p:menuitem> 
                    </p:submenu>


                    <p:submenu label="Amplificadores e Pedais">
                        <p:menuitem value="Amplificador de Guitarra" action="#{backingProduto.prepararListaParametrizada()}">
                            <f:setPropertyActionListener target="#{backingProduto.descricao}" value="AMPLIFICADORES-GUITARRA"/>
                        </p:menuitem> 

                        <p:menuitem value="Amplificador de Violão"  action="#{backingProduto.prepararListaParametrizada()}">
                            <f:setPropertyActionListener target="#{backingProduto.descricao}" value="AMPLIFICADORES-VIOLÃO"/>
                        </p:menuitem> 

                        <p:menuitem value="Amplificador de Contrabaixo" action="#{backingProduto.prepararListaParametrizada()}">
                            <f:setPropertyActionListener target="#{backingProduto.descricao}" value="AMPLIFICADORES-CONTRABAIXO"/>
                        </p:menuitem> 

                        <p:menuitem value="Pedal de Guitarra" action="#{backingProduto.prepararListaParametrizada()}">
                            <f:setPropertyActionListener target="#{backingProduto.descricao}" value="PEDAIS-GUITARRA"/>
                        </p:menuitem>  
                    </p:submenu>

                    <p:submenu label="Bateria e Percussão">
                        <p:menuitem value="Bateria Acústica" action="#{backingProduto.prepararListaParametrizada()}">
                            <f:setPropertyActionListener target="#{backingProduto.descricao}" value="BATERIA ACUSTICA"/>
                        </p:menuitem> 

                        <p:menuitem value="Pratos para Bateria" action="#{backingProduto.prepararListaParametrizada()}">
                            <f:setPropertyActionListener target="#{backingProduto.descricao}" value="PRATO PARA BATERIA"/>
                        </p:menuitem> 
                    </p:submenu>

                    <p:submenu label="Teclas">
                        <p:menuitem value="Teclado Portátil" action="#{backingProduto.prepararListaParametrizada()}">
                            <f:setPropertyActionListener target="#{backingProduto.descricao}" value="TECLADO PORTATIL"/>
                        </p:menuitem> 

                        <p:menuitem value="Piano" action="#{backingProduto.prepararListaParametrizada()}">
                            <f:setPropertyActionListener target="#{backingProduto.descricao}" value="PIANO DIGITAL"/>
                        </p:menuitem> 

                        <p:menuitem value="Sintetizador" action="#{backingProduto.prepararListaParametrizada()}">
                            <f:setPropertyActionListener target="#{backingProduto.descricao}" value="SINTETIZADOR"/>
                        </p:menuitem> 
                    </p:submenu>


                    <p:submenu label="Sopro">
                        <p:menuitem value="Sax" action="#{backingProduto.prepararListaParametrizada()}">
                            <f:setPropertyActionListener target="#{backingProduto.descricao}" value="SAX-ALTO"/>
                        </p:menuitem> 

                        <p:menuitem value="Flauta Transversal" action="#{backingProduto.prepararListaParametrizada()}">
                            <f:setPropertyActionListener target="#{backingProduto.descricao}" value="FLAUTA-TRANSVERSAL"/>
                        </p:menuitem> 
                    </p:submenu>
                </p:menu>
            </h:form>

            <ui:insert name="left">

            </ui:insert>
        </div>
        <!-- Fim do Left -->

        <!-- Início do Right -->
        <div id="right">

            <h:form id="formcADASTRE">
                <p:panel header="Cadastre-se" style="width:170px" rendered="#{!backingCliente.logado}">
                    <p:commandButton value="Cadastro" action="#{backingCliente.preparaAdicionarCliente()}" style="height:30px"/>
                </p:panel>
            </h:form>

            <h:form id="formUsuarioLogado">
                <p:panel header="CadastroProduto" style="width:170px" rendered="#{!backingCliente.logado}">
                    <p:commandButton value="Cadastrar Novo Produto" action="#{backingProduto.prepararAdicionarProduto()}" rendered="#{!backingCliente.admin}"/>  
                </p:panel>
            </h:form>


            <h:form id="formLogin">
                <p:panel header="Login" style="width:170px" rendered="#{!backingCliente.logado}">
                    <!--p:messages id="messages" showDetail="false" autoUpdate="true"/-->
                    <h:outputLabel value="Login"/>
                    <p:inputText value="#{backingCliente.c1.login}" style="height:15px" required="true"/>
                    <h:outputLabel value="Senha" />
                    <p:inputText type="password" value="#{backingCliente.c1.password}" style="height:15px" required="true"/>
                    <p:commandButton value="Logar" action="#{backingCliente.logar()}" style="height:30px"/>
                </p:panel>
            </h:form>

            <h:form id="formMarcas">
                <p:menu style= "width: 180px ; bottom: -30px" >
                    <p:submenu label="Destaques">
                        <p:menuitem><a href="#" onclick="javascript:window.open('http://br.yamaha.com/');" title="Yamaha"><h:graphicImage value="resources/img/logo/y.png" ></h:graphicImage></a> </p:menuitem>
                        <p:menuitem><a href="#" onclick="javascript:window.open('http://www.michael.com.br/site/');" title="Michael"><h:graphicImage value="/resources/img/logo/m.png"></h:graphicImage></a></p:menuitem> 
                        <p:menuitem><a href="#" onclick="javascript:window.open('http://roland.com.br/');" title="Roland"><h:graphicImage value="/resources/img/logo/r.png" ></h:graphicImage></a></p:menuitem> 
                        <p:menuitem><a href="#" onclick="javascript:window.open('http://vogga.com.br/');" title="Michael"><h:graphicImage value="/resources/img/logo/v.png"  ></h:graphicImage></a></p:menuitem> 
                    </p:submenu>
                </p:menu>
            </h:form>


            <ui:insert name="right"></ui:insert>
        </div>
        <!-- Fim do Right -->

        <!-- Início do Content -->
        <div id="content">
            <!--div id="fonte">
            </div-->   
            <ui:insert name="content"></ui:insert>

        </div>
        <!-- Fim do Content -->

        <!-- Início do Botton -->  

        <div id="bottom">


            <a style= "padding:15px 10px 5px 1050px;" href="#" onclick="javascript:window.open('https://www.facebook.com');" title="Facebook">
                <h:graphicImage value="/resources/img/logo/facebook.png" width="30" height="30"/>
            </a>



            <div id="icon_vendas">
            </div>

            <div id="icon_forma_pagamento">
            </div>

            <div id="icon_boleto">
            </div>  

            <div id="busca_02" style="top: -200px; left: 500px">
                <h:form id="formPesquisa">
                    <p:inputText style="height:15px" required="true"/>
                    <h:outputLabel value="BUSCAR"/>
                    <h:commandButton image="/resources/img/icons/pesquisa.png"/>
                </h:form>
            </div>
        </div>
        <!-- Fim do Botton -->
    </h:body>

</html>
